@import "base";

body,html{
  height:100%;
}

.chat-box{
  height: 100%;
}
.chat-input-box{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.am-flexbox .chat-input{
  width: px2rem(600px , $base-font-size);
  height: px2rem(80px , $base-font-size);
  flex:4;
  @include px2px('font-size' , 32);
}
.chat-input input{
  width: px2rem(520px , $base-font-size);
  height: 100%;
  border: none;
  padding: 0 px2rem(40px , $base-font-size);
}

.chat-button-send{
  text-align: center;
}
.chat-button-send button{
  color: #fff;
  background: #32cbe6;
  height: px2rem(80px , $base-font-size);
  width: 100%;
  border: 1px solid #32cbe6;
  @include px2px('font-size' , 32);
}

.chat-info-box{
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: px2rem(80px , $base-font-size);
  border-bottom: 1px solid #efeff4;
  background: #efeff4;
  height: px2rem(1253px , $base-font-size);
  overflow-y:scroll;
}

.chat-head{
  width: px2rem(120px , $base-font-size);
  border: 1px solid #efeff4;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
}

.chat-head img{
  width: 100%;
}

.chat-item-box{
  padding: px2rem(20px , $base-font-size) px2rem(40px , $base-font-size);
  margin-bottom: px2rem(20px , $base-font-size);
  background: #efeff4;
}

.am-flexbox.chat-item-box{
  align-items: end;
}

.am-flexbox .chat-item-box-right{
  flex:4;
  margin-top: px2rem(15px , $base-font-size);
}

.chat-item-box-user{
  margin-bottom: px2rem(20px , $base-font-size);
}

.chat-item-box-user-name{
  @include px2px('font-size',28);
  color: #999;
}
.chat-item-box-time{
  color: #b4b4b4;
}

.chat-item-content{
  position: relative;
  min-height: px2rem(40px , $base-font-size);
  line-height: px2rem(40px , $base-font-size);
  padding: px2rem(8px , $base-font-size) px2rem(15px , $base-font-size);
  background-color: #fff;
  border-radius: 5px;
  color: #333;
  word-break: break-all;
  @include px2px('font-size',32);
}

.chat-item-content:after{
  content: '';
  position: absolute;
  left: px2rem(-19px , $base-font-size);
  top: px2rem(13px , $base-font-size);
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  overflow: hidden;
  border-width: px2rem(20px , $base-font-size);
}
.chat-item-box-content{
  padding-left: px2rem(19px , $base-font-size);
}

.am-flexbox.chat-item-box-content-right{
  align-items: flex-end;
}
.chat-item-box-content-right{
  padding-right: px2rem(19px , $base-font-size);
}

.chat-item-content-right{
  position: relative;
  min-height: px2rem(40px , $base-font-size);
  line-height: px2rem(40px , $base-font-size);
  padding: px2rem(8px , $base-font-size) px2rem(15px , $base-font-size);
  background-color: #32cbe6;
  border-radius: 5px;
  color: #fff;
  word-break: break-all;
  @include px2px('font-size',32);
}

.chat-item-content-right:after{
  content: '';
  position: absolute;
  right: px2rem(-19px , $base-font-size);
  top: px2rem(13px , $base-font-size);
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #32cbe6 transparent transparent;
  overflow: hidden;
  border-width: px2rem(20px , $base-font-size);
}

.chat-item-box-user-name-right{
  @include px2px('font-size',28);
  color: #999;
  text-align: right;
}